<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/dateFormat.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .commentBar {
      width: 600px;
      margin: 0 auto;
    }

    .commentBar .commentSendBox {
      margin-top: 50px;
    }

    .commentBar .commentSendBox textarea {
      width: 100%;
      height: 200px;
      resize: none;
      padding: 10px;
      box-sizing: border-box;
      outline: none;
    }

    .commentBar .commentSendBox .sendBox {
      display: flex;
      justify-content: space-between;
    }

    .commentListBox {
      margin-top: 50px;
      font-size: 12px;
      line-height: 18px;
    }

    .showComment li {
      padding: 10px;
    }

    .showComment li+li {
      border-top: 1px dashed #333;
    }

    .comment {
      text-indent: 10px;
    }

    .commentDetail {
      display: flex;
      text-indent: 10px;
    }

    .reply {
      margin-left: 50px;
    }

    .replyList {
      padding-left: 50px;
    }

    .replyList .comment-header {
      margin-top: 12px;
    }

    .comment-bottom {
      height: 80px;
      display: flex;
      margin-top: 20px;
      display: none;
    }

    .comment-bottom .replyCon {
      flex: 1;
      height: 80px;
      border-radius: 10px;
      margin-right: 10px;
      outline: none;
      padding: 10px;
      box-sizing: border-box;
      resize: none;
    }

    .comment-bottom .replyBtn {
      width: 80px;
      height: 80px;
      background-color: #00b5e5;
      border-radius: 10px;
      word-break: break-all;
      font-size: 24px;
      word-spacing: 10px;
      line-height: 40px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="commentBar">
    <div class="commentSendBox">
      <textarea name="" id="" cols="30" rows="10" class="commentCon"></textarea>
      <div class="sendBox">
        <div class="commentTips">您还可以输入50个字</div>
        <button class="commentSend">发送</button>
      </div>
    </div>
    <div class="commentListBox">
      <ul class="showComment">
        <!-- <li>
                    <div class="comment-header">
                        <div class="nick">PigZhang</div>
                        <div class="comment">天对地，雨对风，黑心棉对白岩松</div>
                        <div class="commentDetail">
                            <div class="time">2021-05-16 18:03</div>
                            <div class="reply">回复</div>
                        </div>
                    </div>
                    <div class="replyList">
                        <li>
                            <div class="comment-header">
                                <div class="nick">PigZhang: <span class="comment">天对地，雨对风，黑心棉对白岩松</span></div>
                                <div class="commentDetail">
                                    <div class="time">2021-05-16 18:03</div>
                                    <div class="reply">回复</div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="comment-header">
                                <div class="nick">PigZhang: <span class="comment">天对地，雨对风，黑心棉对白岩松</span></div>
                                <div class="commentDetail">
                                    <div class="time">2021-05-16 18:03</div>
                                    <div class="reply">回复</div>
                                </div>
                            </div>
                        </li>
                         <li>
                            <div class="comment-header">
                                <div class="nick">PigZhang: <span class="comment">天对地，雨对风，黑心棉对白岩松</span></div>
                                <div class="commentDetail">
                                    <div class="time">2021-05-16 18:03</div>
                                    <div class="reply">回复</div>
                                </div>
                            </div>
                        </li>
                    </div>
                    <div class="comment-bottom">
                        <textarea class="replyCon" name="" id="" cols="30" rows="10"></textarea>
                        <a class="replyBtn" href="javascript:;">发表 评论</a>
                    </div>
                </li> -->
      </ul>
    </div>
  </div>
</body>
<script>
  // 1.  评论框输入提示
  // a.  onkeypress 按下触发 此时内容还没有输入到文本框中 => 错位了一个 (在绑定一个onkeyup)
  // b.  评论框虽然做了计数 但是该超还会超 => (1) return false(阻止默认输入)
  // c.  中文输入法,悬浮在输入框之上, 此时内容依旧可以输入到框中  =>  只截取前50个字符,剩余的不要

  // 2. 点击发送 快捷键发送(ctrl+enter)
  // 3. 留言回复


  // 1. 评论框输入提示

  var commentCon = document.getElementsByClassName("commentCon")[0];
  var commentTips = document.getElementsByClassName("commentTips")[0];
  var commentSend = document.getElementsByClassName("commentSend")[0];

  var showComment = document.getElementsByClassName("showComment")[0];

  // 1.1 先按下按键  => 再把按键对应的字符放到输入框
  //     onkeypress 触发时文本还没有放到输入框 => 错位
  //     解决方法 按下和抬起时都触发一次事件
  // 1.2 评论框虽然做了计数 但是该超还会超 => (1) return false(阻止默认输入)
  // 1.3 1.2中存在bug: 中文输入法 悬浮在输入框之上, 此时内容依旧可以输入到框中  =>  只截取前50个字符,剩余的不要

  // 输入提示和快捷键发送
  commentCon.onkeypress = commentCon.onkeyup = commentInputHandler;

  // 点击发送
  commentSend.onclick = commentSendHandler;


  showComment.onclick = function (e) {
    var e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.className == "reply") {
      var commentBottomList = showComment.getElementsByClassName("comment-bottom");
      for (var i = 0; i < commentBottomList.length; i++) {
        commentBottomList[i].style.display = "none";
      }

      var parentLi = parent(parent(parent(target)));
      var commentBottom = parentLi.getElementsByClassName("comment-bottom")[0];
      commentBottom.style.display = "flex";
    } else if (target.className == "replyBtn") {
      var replyConInp = prev(target);
      var replyCon = replyConInp.value;

      var li = document.createElement("li");
      li.innerHTML = `<div class="comment-header">
                            <div class="nick">PigZhang: <span class="comment">${replyCon}</span></div>
                            <div class="commentDetail">
                                <div class="time">${dateFormat("YYYY-MM-DD hh:mm")}</div>
                            </div>
                        </div>`
      var commentBottom = parent(target);
      var replyList = prev(commentBottom);
      replyList.prepend(li);

      // 回复完毕 
      // 清空回复框
      replyConInp.value = "";

      // 隐藏回复盒子
      commentBottom.style.display = "none";

    }
  }


  function commentInputHandler(e) {
    var e = e || window.event;
    var con = this.value;
    // console.log(con);

    var sum = 50;
    var num = sum - con.length;
    commentTips.textContent = `您还可以输入${num}个字`;
    if (num <= 0) {
      e.preventDefault();   //内容达到上限 => 无法输入(阻止输入框默认输入)

      var str = con.substr(0, 50);  // 先截取前50 
      this.value = str;            // 在放回输入框
    }

    var keyCode = e.which || e.keyCode;
    // console.log(e.key,keyCode);

    // 快捷键发送  (ctrl+enter)
    if (e.ctrlKey && keyCode == 13) {
      commentSendHandler();
    }


  }

  var badWordList = ["菜B", "菜狗", "辣鸡", "辣鸡", "SB", "CNM"];


  function commentSendHandler() {
    var comment = commentCon.value;
    if (comment) {
      // comment.replace(/规则/ig,"*")

      // 1. 遍历集合 每次替换一个
      // for(var i=0;i<badWordList.length;i++){
      //     var badWord = badWordList[i];
      //     var reg = new RegExp(badWord,"ig");

      //     // 根据敏感词生成对应长度的字符 *
      //     var newStr = "";
      //     for(var j=0;j<badWord.length;j++){
      //         newStr +="*";
      //     }
      //     comment = comment.replace(reg,newStr);  //返回新字符串   => 覆盖原本的
      // }

      // 2. 一次性替换所有的  /菜B|菜狗|辣鸡|辣鸡|SB|CNM/
      var badStr = badWordList.join("|");  // '菜B|菜狗|辣鸡|辣鸡|SB|CNM'
      var reg = new RegExp(badStr, "ig");

      // replace(reg,callback) 接收一个回调函数 => 每次替换时都会执行此回调函数,根据回调函数的返回值 替换原本的字符串
      // badWord => 形式参数, 被替换的字符串

      comment = comment.replace(reg, function (badWord) {  //badWord 被替换的字符
        console.log(badWord);
        var newStr = "";
        for (var j = 0; j < badWord.length; j++) {
          newStr += "*";
        }
        return newStr;
      });


      var li = document.createElement("li");
      li.innerHTML = `<div class="comment-header">
                        <div class="nick">PigZhang</div>
                        <div class="comment">${comment}</div>
                        <div class="commentDetail">
                            <div class="time">${dateFormat("YYYY-MM-DD hh:mm")}</div>
                            <div class="reply">回复</div>
                        </div>
                    </div>
                    <div class="replyList"></div>
                    <div class="comment-bottom">
                        <textarea class="replyCon" name="" id="" cols="30" rows="10"></textarea>
                        <a class="replyBtn" href="javascript:;">发表 评论</a>
                    </div>`;
      showComment.prepend(li);

      commentCon.value = "";


      /*  // 假禁止
       commentSend.disabled = true;
       commentCon.disabled = true;

       // 真禁止  => 清除事件
       commentCon.onkeypress = commentCon.onkeyup = null;
       commentSend.onclick = null;



       // 倒计时
       var count = 60;
       commentTips.textContent = `距离下次输入还有${count}秒`;
       var timer = setInterval(function(){
           count--;
           commentTips.textContent = `距离下次输入还有${count}秒`;
           if(count <=0){
               clearInterval(timer);
               commentTips.textContent = `您还可以输入50个字`;
               // 倒计时结束 
               // 解禁按钮
               commentSend.disabled = false;
               commentCon.disabled = false;
               
               // 重新绑定事件
               commentCon.onkeypress = commentCon.onkeyup = commentInputHandler;
               commentSend.onclick = commentSendHandler;
           }
       },1000); */


    }
  }

  function parent(ele) {
    return ele.parentElement || ele.parentNode;
  }

  function prev(ele) {
    return ele.previousElementSibling || ele.previousSibling;
  }

  function next(ele) {
    return ele.nextElementSibling || ele.nextSibling;
  }





</script>

</html>